<template>
  <view class="detail_select_wapper">
    <view class="dsw_left">{{ title }}</view>
    <view class="dsw_right">
      <uni-data-picker placeholder="请进行选择" v-model="pvalue" popup-title="请进行选择" :localdata="items" :readonly="disabled" @change="onChange"> </uni-data-picker>
    </view>
  </view>
</template>

<script>
import { uniDataPicker } from '@dcloudio/uni-ui'

export default {
  components: {
    uniDataPicker,
  },
  props: {
    title: {
      type: [String, null, undefined],
      default: '标题',
    },
    value: {
      type: [Number, String, null, undefined],
      default: 0,
    },
    items: {
      type: [Array, null],
      default: [],
    },
    disabled: {
      type: [Boolean, null, undefined],
      default: false,
    },
    map: {
      default: { value: 'value', text: 'text' },
    },
  },
  watch: {
    value: {
      handler(nv, ov) {
        if (nv) {
          this.pvalue = [{ value: String(nv) }]
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      pvalue: [{ value: '1' }],
    }
  },
  methods: {
    onChange({ detail }) {
      this.$emit('update:value', detail.value)
    },
  },
}
</script>

<style lang="scss" scoped>
.detail_select_wapper {
  width: 100%;
  height: 90rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  font-weight: 500;
  position: relative;
  &::after {
    content: ' ';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1rpx solid #e6e6e6;
  }
  .dsw_left {
    width: 200rpx;
    color: #666666;
  }
  .dsw_right {
    flex: 1;
    color: #333333;
  }
}
</style>
